{{define "explorer"}}
{{template "header" .}}
<link rel="stylesheet" href="/styles/style.css">
<script src="https://cdn.jsdelivr.net/npm/@simonwep/selection-js/dist/selection.min.js"></script>

{{template "aside" .}}
<section class="explorer">

    <div for="control">
        {{if (ne .List.ParentID 0)}}
        <a class="pure-button" href="/u/explorer/{{.List.ParentID}}"><i class="material-icons">arrow_back</i></a>
        {{end}}
        {{if .HasUser}}
        <form class="pure-form new-list" style="display: none;">
            <input type="text" name="name" placeholder="Press Enter to Submit" required maxlength="100">
            <input class="pure-button" type="submit" hidden>
        </form>
        <button class="new-list pure-button">New Folder</button>
        <button class="new-book pure-button">New Book</button>
        <button class="remove pure-button" style="display: none;">remove</button>
        {{end}}
    </div>

    {{if .HasUser}}
    <div for="upload-books" style="display: none;">
        {{template "books/new" .}}
    </div>
    {{end}}

    <div for="show-lists">
        <div role="lists">
            {{with .List.Children}}
            {{range .}}
            <div class="list-child selectable" data-id={{.ID}}>
                <a href="/u/explorer/{{.ID}}">
                    <i class="material-icons">
                        folder
                    </i>
                </a>
                <span>{{.Name}}</span>
            </div>
            {{end}}
            {{end}}
        </div>
    </div>

    <div for="show-books">
        {{template "books" .List}}
    </div>


</section>

<script>
    var newListEndPoint = "/u/lists/{{.List.ID}}/child/new"
    var currentList = "{{.List.ID}}"
</script>

<script src="/scripts/explorer.js"></script>

{{template "footer" .}}
{{end}}